<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #topBox {
            background: #f00;
            position: fixed;
            top: -100px;
            left: 0;
            width: 100%;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
        }

        #back {
            width: 100px;
            height: 100px;
            background-color: #abcdef;
            position: fixed;
            right: 20px;
            bottom: 50px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="topBox">
        顶部通栏广告
    </div>
    <p style="width:20px;">
        锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
        床前明月光，疑是地上霜。举头望明月，低头思故乡。

        离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
    </p>
    <div id="back">
        回到顶部
    </div>
</body>
<script type="text/javascript">
    //顶部悬浮
    // 1、当滚动距离达到300px时显示出顶部公共
    // 2、当滚动距离达到350px是显示回到顶部
    // 3、当前几回到顶部 慢慢的滑动上去
    window.onscroll = function () {
        var h = document.documentElement.scrollTop;
        document.querySelector('#topBox').style.top = h >= 300 ? 0 : '-100px';
        document.querySelector('#back').style.display = h >= 350 ? 'black' : 'none';
    }
    var timere;
    document.querySelector('#back').onclick = function () {
        timere.setinterval(function () {
            var h = document.documentElement.scrollTop;
            if (h <= 0) {
                clearInterval(timere);
            } else {
                document.documentElement.scrollTop = h - 20;
            }
        }, 30)
    }
    // var topBox = document.querySelector('#topBox').onc

</script>

</html>